<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="字典名字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getDictionaryType">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="dictionaryType" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="80">
			</el-table-column>
			<el-table-column type="index" width="100">
			</el-table-column>
			<el-table-column prop="name" label="字典名字" width="320">
				<template slot-scope="scope">
					<div prop="name" @dblclick="goto(scope.$index, scope.row)">{{scope.row.name}}</div>
				</template>
			</el-table-column>
			<el-table-column prop="sn" label="字典编号" width="320">
                <template slot-scope="scope">
                    <div prop="name" @dblclick="goto(scope.$index, scope.row)">{{scope.row.sn}}</div>
                </template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="totals" :current-page="currentPage" style="float:right;">
            </el-pagination>
        </el-col>

		<!--新增界面-->
		<el-dialog :title="title" :visible.sync="dictionaryTypeFormVisible" :close-on-click-modal="false">
			<el-form :model="dictionaryTypeForm" label-width="80px" :rules="dictionaryTypeFormRules" ref="dictionaryTypeForm">
				<el-form-item label="字典名字" prop="name">
					<el-input v-model="dictionaryTypeForm.name"auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="字典编号">
					<el-input v-model="dictionaryTypeForm.sn"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="dictionaryTypeFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--明细新增界面-->
		<el-dialog :title="title" :visible.sync="dictionaryDetailFormVisible" :close-on-click-modal="false">
			<el-form :model="dictionaryDetailForm" label-width="80px" :rules="dictionaryDetailFormRules" ref="dictionaryDetailForm">
				<el-form-item label="字典明细" prop="name">
					<el-input v-model="dictionaryDetailForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="dictionaryDetailFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="daddSubmit" :loading="daddLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-drawer
				:title="dtitle"
				:visible.sync="table"
				direction="rtl"
				size="50%">
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-button type="primary" @click="dhandleAdd">新增</el-button>
					</el-form-item>
				</el-form>
			</el-col>
			<el-table :data="dictionaryTypeDetail" highlight-current-row v-loading="Loading" @selection-change="selsChange" style="width: 100%;">
				<el-table-column type="index" width="100">
				</el-table-column>
				<el-table-column prop="name" label="字典明细" width="180">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template scope="scope">
						<el-button size="small" @click="dhandleDetailEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="dhandleDetailDel(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next" @current-change="dhandleCurrentChange" :page-size="dpageSize" :total="dtotal" style="float:right;">
				</el-pagination>
			</el-col>
		</el-drawer>

	</section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                dictionaryTypeDetail: [],
                dtitle: '',
                // 抽屉默认关闭
                table: false,
                title: '',
                filters: {
                    name: ''
                },
                dictionaryType: [],
                totals: 0,
                currentPage: 1,
                pageSize: 5,
                dtotal: 0,
                dcurrentPage: 1,
                dpageSize: 5,
                did: null,
                addLoading: false,
                listLoading: false,
                Loading: false,
                daddLoading: false,
                dictionaryTypeFormVisible: false,
                dictionaryDetailFormVisible: false,
                sels: [],//列表选中列

                dictionaryTypeFormRules: {
                    name: [
                        { required: true, message: '请输字典名字', trigger: 'blur' }
                    ]
                },
                dictionaryDetailFormRules: {
                    name: [
                        { required: true, message: '请输字典明细', trigger: 'blur' }
                    ]
                },

                //新增界面数据
                dictionaryTypeForm: {
                    id: null,
                    name: '',
                    sn: ''
                },
                //明细新增界面数据
                dictionaryDetailForm: {
                    id: null,
                    name: '',
                    types_id: null
                }

            }
        },
        methods: {
            goto(i,row){
                this.handleDrawer(i,row)
            },
            // 打开抽屉
            handleDrawer(i,row){
                this.did = row.id;
                this.dtitle = row.name;
                this.table = true;
                let para = {
                    currentPage: this.dcurrentPage,
                    keyword: this.filters.name,
                    pageSize: this.dpageSize,
                    id: row.id,
                };
                this.$http.post("/detail",para).then(res=>{
                    this.dtotal = res.data.total;
                    this.dictionaryTypeDetail = res.data.rows;
                }).catch(()=>{
                    this.$message({
                        message: '系统繁忙，请稍后重试!',
                        type: 'error'
                    });
                })
            },


            // 批量删除
            batchRemove(){
                var ids = this.sels.map(item => item.id);
                this.$confirm('确认删除已选记录吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    this.$http.patch("/dic",ids).then(res=>{
                        if(res.data.success){
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            this.getDictionaryType();
                        }else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            });
                        }
                        this.listLoading = false;
                    })

                }).catch(() => {
                    this.$message({
                        message: "已取消删除",
                        type: 'info'
                    });
                });
            },

            // 显示新增页面
            handleAdd(){
                this.title = '新增';
                this.dictionaryTypeFormVisible = true;
                this.dictionaryTypeForm = {
                    id: null,
                    name: '',
                    sn: ''
                }
            },
            dhandleAdd(){
                this.title = '添加明细';
                this.dictionaryDetailFormVisible = true;
                this.dictionaryDetailForm = {
                    id: null,
                    name: '',
                }
            },
            //显示编辑界面
            handleEdit(index, row) {
                this.dictionaryTypeFormVisible = true;
                this.dictionaryTypeForm = Object.assign({}, row);
            },
            dhandleDetailEdit(index, row){
                this.dictionaryDetailFormVisible = true;
                this.dictionaryDetailForm = Object.assign({}, row);
            },
            // 提交数据
            addSubmit(){
                this.$refs.dictionaryTypeForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '温馨提示', {}).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.dictionaryTypeForm);
                            this.$http.put("/dic",para).then(res => {
                                this.addLoading = false;
                                if(res.data.success){
                                    this.$message({
                                        message: res.data.message,
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['dictionaryTypeForm'].resetFields();
                                this.dictionaryTypeFormVisible = false;
                                this.getDictionaryType();
                            });
                        });
                    }
                });
            },
            daddSubmit(){
                this.$refs.dictionaryDetailForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '温馨提示', {}).then(() => {
                            this.daddLoading = true;
                            let para = Object.assign({}, this.dictionaryDetailForm);
                            para.types_id = this.did;
                            this.$http.put("/detail",para).then(res => {
                                this.daddLoading = false;
                                if(res.data.success){
                                    this.$message({
                                        message: res.data.message,
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: res.data.message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['dictionaryDetailForm'].resetFields();
                                this.dictionaryDetailFormVisible = false;
                                this.getDictionaryTypeDetail();
                            });
                        });
                    }
                });
            },
            // 翻页
            handleCurrentChange(page) {
                this.currentPage = page;
                this.getDictionaryType();
            },
            // 明细翻页
            dhandleCurrentChange(page) {
                this.dcurrentPage = page;
                this.getDictionaryTypeDetail();
            },

            //获取字典列表
            getDictionaryType() {
                let para = {
                    currentPage: this.currentPage,
                    keyword: this.filters.name,
                    pageSize: this.pageSize
                };
                this.$http.post("/dic",para).then(res=>{
                    console.log("123123",res)
                    this.totals = res.data.totalCount;
                    this.dictionaryType = res.data.data;
                }).catch(()=>{
                    this.$message({
                        message: '系统繁忙，请稍后重试!',
                        type: 'error'
                    });
                })

            },
            //获取字典明细列表
            /*getDictionaryTypeDetail() {
                let para = {
                    currentPage: this.currentPage,
                    keyword: this.filters.name,
                    pageSize: this.pageSize,
                    id: row.id,
                };
                this.$http.post("/detail",para).then(res=>{
                    this.total = res.data.total;
                    this.dictionaryTypeDetail = res.data.rows;
                }).catch(()=>{
                    this.$message({
                        message: '系统繁忙，请稍后重试!',
                        type: 'error'
                    });
                })

            },*/

            //删除
            handleDel(index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let url = "/dic/" + row.id;
                    this.$http.delete(url).then(res=>{
                        if(res.data.success){
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            this.getDictionaryType();
                            if(index == 0){
                                this.currentPage = 1;
                                this.getDictionaryType();
                            }
                        }else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            });
                        }
                        this.listLoading = false;
                    })
                    /*if(index == 0){
                            this.currentPage = 1;
                        }*/
                }).catch(() => {
                    this.$message({
                        message: "已取消删除",
                        type: 'info'
                    });
                });
            },
            dhandleDetailDel(index, row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.Loading = true;
                    let url = "/detail/" + row.id;
                    this.$http.delete(url).then(res=>{
                        if(res.data.success){
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            this.getDictionaryTypeDetail();
                            if(index == 0){
                                this.dcurrentPage = 1;
                                this.getDictionaryTypeDetail();
                            }
                        }else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            });
                        }

                        this.Loading = false;
                    })

                }).catch(() => {
                    this.$message({
                        message: "已取消删除",
                        type: 'info'
                    });
                });
            },
            // 批量选择
            selsChange(sels){
                this.sels = sels;
            },
            // 获取字典明细
            getDictionaryTypeDetail(){
                let para = {
                    currentPage: this.dcurrentPage,
                    keyword: this.filters.name,
                    pageSize: this.dpageSize,
                    id: this.did,
                };
                this.$http.post("/detail",para).then(res=>{
                    this.dtotal = res.data.totalCount;
                    this.dictionaryTypeDetail = res.data.data;
                }).catch(()=>{
                    this.$message({
                        message: '系统繁忙，请稍后重试!',
                        type: 'error'
                    });
                })
            },

        },

        mounted(){
            this.getDictionaryType();
            this.getDictionaryTypeDetail();
        }
    }

</script>

<style scoped>

</style>